<script lang="ts" setup>
import { ref, reactive } from "vue";
import { PercentPond, Decoration10 } from "@kjgl77/datav-vue3";
import rightThreeItem from "./rightThreeItem.vue";
</script>
<template>
  <div
    style="
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
    "
  >
    <!-- <jdt></jdt>
      <jdt :duration="4" :color="['#fce43000', '#fce43050', '#fce430']"></jdt>
      <jdt :duration="5" :color="['#03fed200', '#03fed250', '#03fed2']"></jdt> -->
    <rightThreeItem
      icon="/threeIcon1.png"
      title="工业机械"
      :value="2312312"
      valueColor="#00fdfe"
    ></rightThreeItem>
    <rightThreeItem
      icon="/threeIcon2.png"
      title="科技互联网"
      :value="2312312"
      valueColor="#fce430"
      :color="['#fce43000', '#fce43050', '#fce430']"
    ></rightThreeItem>
    <rightThreeItem
      icon="/threeIcon3.png"
      title="能源环保"
      :value="2312312"
      valueColor="#03fed2"
      :color="['#03fed200', '#03fed250', '#03fed2']"
    ></rightThreeItem>
  </div>
</template>
<style scoped></style>
